<script setup>

import router from "@/router";
import {getCurrentInstance, onBeforeMount, reactive} from "vue";
import {post} from "@/net";
import {useStore} from "@/stores/userStore";
import {ElMessage} from "element-plus";

const singers = reactive([])
const { proxy } = getCurrentInstance()
const store = useStore()

onBeforeMount(() => {
    getGameSingers()
})

const getGameSingers = () => {
    post('/api/game/game-singers', {
                gid: proxy.$route.query.gid
            }, (data) => {
                singers.value = data
                getVoteCount()
            }
    )
}

const getVoteCount = () => {
    post('/api/vote/count-list', {
                gid: proxy.$route.query.gid
            }, (data) => {
                for (let i = 0; i < singers.value.length; i++) {
                    singers.value[i].count = data[i]
                }
                for (let i = 0; i < singers.value.length; i++) {
                    getVoteState(i, singers.value[i].sid)
                }
                console.log(singers.value)
            }
    )
}

const getVoteState = (i, sid) => {
    post('/api/vote/is-vote-sid', {
            uid: store.auth.user.uid,
            gid: proxy.$route.query.gid,
            sid: sid
        }, (state) => {
            singers.value[i].active = state
        }
    )
}

const vote = (sid) => {
    post('/api/vote/is-vote', {
                uid: store.auth.user.uid,
                gid: proxy.$route.query.gid,
                sid: 0
            }, (state) => {
                if (state === 2) {
                    post('/api/vote/add', {
                                uid: store.auth.user.uid,
                                gid: proxy.$route.query.gid,
                                sid: sid
                            }, (message) => {
                                ElMessage.success(message)
                                getVoteCount()
                            }, (message) => {
                                ElMessage.warning(message)
                            }
                    )
                } else ElMessage.warning('您已投过票，请勿重复投票')
            }, (state) => {
                if (state === 3) ElMessage.warning('投票失败')
            }
    )
}

const cancelVote = (sid) => {
    post('/api/vote/delete', {
            uid: store.auth.user.uid,
            gid: proxy.$route.query.gid,
            sid: sid
        }, (message) => {
            ElMessage.success(message)
            getVoteCount()
        }, (message) => {
            ElMessage.warning(message)
        }
    )
}

const getImgSrc = (picName) => {
    return `http://localhost:8080/uploaded/${picName}`
}
</script>

<template>
    <div>
        <div>
            <el-button @click="router.push('/index/game')" type="warning">{{ '返回' }}</el-button>
        </div>
        <div class="vote-list">
            <el-space wrap :size="30">
                <el-card :body-style="{ padding: '0px' }" v-for="singer in singers.value">
                    <el-image
                            fit="cover"
                            :src="getImgSrc(singer.pic)"
                            class="image"
                    />
                    <div style="padding: 14px">
                        <span style="font-weight: bold">{{singer.name}}</span>
                        <div style="margin-top: 10px">
                            当前票数：
                            <input v-model="singer.count" style="border: 0;font-size: 16px" disabled>
                        </div>
                        <div class="bottom">
                            <el-button v-if="singer.active === 2" type="success" @click="vote(singer.sid)">点击投票</el-button>
                            <el-button v-if="singer.active === 1" type="danger" @click="cancelVote(singer.sid)">取消投票</el-button>
                        </div>
                    </div>
                </el-card>
            </el-space>
        </div>
    </div>
</template>

<style scoped>
.vote-list {
    margin: 20px 140px 0 140px;
}
.image {
    width: 280px;
    height: 280px;
}
.bottom {
    margin-top: 10px;
}
</style>